<template>
    <div class="yemian">
        <router-link to="MakingFriends">&lt;</router-link>
        <div class="sousuo">
            <i class="sou-i"></i>
            <input type="text" class="kuang" placeholder="搜索你感兴趣的内容" id="input" v-model="search">
            <button @click="searchBtn" class="sou-sou">搜索</button>
        </div>
        <div class="jieguo">
            <ul>
                <li v-for="item in tableDataTwo" :key="item.value" class="liebiao">
                    <span>{{ item.name }}</span>
                    <img v-bind:src="item.tu" alt="" class="tu">
                    <span><img v-bind:src="item.tu2" alt="" class="tu2">{{ item.di }}</span>
                    <span>{{ item.hao }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>

import { ref } from 'vue'
export default {
    setup() {
        const search = ref('') //搜索框数据绑定
        const tableData = ref([
            {
                name: "成都版比尔宠物医院",
                tu: require('./imges/NoPath1.png'),
                tu2: require('./imges/组 40.png'),
                di: "xxxx号广场旁",
                hao: "145-3562-2542"
            },
            {
                name: "成都艾斯比宠物医院",
                tu: require('./imges/NoPath2.png'),
                tu2: require('./imges/组 40.png'),
                di: "XXX路1556号",
                hao: "135-5872-3574"
            },
            {
                name: "四川上陈兽宠物医院",
                tu: require('./imges/NoPath3.png'),
                tu2: require('./imges/组 40.png'),
                di: "XXXX小区458号",
                hao: "125-2542-3574"
            },
            {
                name: "上海恒爱动物医院",
                tu: require('./imges/NoPath4.png'),
                tu2: require('./imges/组 40.png'),
                di: "XXXX广场",
                hao: "153-6875-2445"
            },
        ])
        const tableDataTwo = ref([])
        const searchBtn = () => {
            let sea = search.value
            if (sea) {
                tableDataTwo.value = tableData.value.filter(function (a) { //通过鲁律数据赋值给新数组可实现重复搜索
                    return Object.keys(a).some(function (key) {
                        return String(a['name']).toLowerCase().indexOf(sea) > -1
                    })
                })
            }
        }
        return {
            search,
            searchBtn,
            tableDataTwo
        }
    }
}
</script>
  
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.yemian a {
    width: 100%;
    text-decoration: none;
    font-size: 35px;
    color: black;
}

.yemian {
    min-height: 100vh;
    background: url("./imges/custom\ –\ 8.png") center center no-repeat;
    background-size: 100% 100%;
}

.sousuo {
    
    margin-top: 20px;
    width: 100%;
}

.sou-i {
    background: url(../img/搜索.png) no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 78px;
    left: 33px;
}
.sou-sou{
    width: 60px;
    height: 54px;
    border-radius:0 30px 30px 0;
    background-color: rgb(255,247,239);
    color: rgb(75, 69, 61);
    border-color: rgb(232 121 0);
    position: absolute;
    float: right;
    font-size: 20px;
    /* margin-right: -50px; */
 /* margin: 0px -20px 0px 0px; */

}
.kuang {
    width: 230px;
    height: 50px;
    /* border-radius: 30px ; */
    border-color: rgb(251, 152, 86);
    margin-left: 23px;
    /* margin-left: 30px;
    margin-top: 50px; */
    font-size: 25px;
}
#input{
    border-radius: 30px 0 0 30px;
    padding-left: 40px;
}
#input::-webkit-input-placeholder {
    color: black;
    font-size: 25px;
    text-align: center;
}

.liebiao {
    width: 80%;
    height: 120px;
    border-radius: 25px;
    background-color: white;
    margin: 0 auto;
    margin-top: 20px;
    list-style: none;
}

.liebiao .tu {
    width: 40%;
    height: 85px;
    float: right;
    margin-right: 15px;
    margin-top: 15px;
}

.liebiao .tu2 {
    width: 15%;
    height: 22px;
}

.liebiao span {
    width: 50%;
    height: 25px;
    float: left;
    margin-left: 15px;
    margin-top: 10px;
    font-size: 16px;
}
</style>